<template>
    <div class="w-full flex justify-center items-center overflow-hidden">
        <div class="w-full relative">
            <div class="flex justify-between px-5 mr-3 my-5" v-for="item in data">
                <div>{{item.name}}</div>
                <input v-if="item.inputType==='text'" :class="item.inputStyle" type="text" v-model="state[item.bind]" />
                <textarea v-if="item.inputType==='textaera'" :class="item.inputStyle" v-model="state[item.bind]"></textarea>
            </div>
        
        </div>
    </div>
    <div class="flex justify-center mt-5"  >
        <div
            class="border border-blue-300 px-5 py-1 rounded bg-green-500 mr-5 text-white shadow-sm"
            @click="templateSave(saveData.key, saveData.value)"
        >暂时保存数据</div>
        <div
            @click="upload(uploadData.url, uploadData.data)"
            class="border border-blue-300 px-5 py-1 rounded bg-blue-500 text-white shadow-sm"
        >提交</div>
    </div>
    <!-- <div class="mt-5">
        <div class="border text-center border-blue-300 px-5 py-1 rounded bg-blue-500 text-white shadow-sm" @click="getDocument()">查询一日文档</div>
    </div> -->
</template>

<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import { state, templateSave,upload } from "../utils/utils";
import { config } from "../config";

const data = reactive([
    {name: '主题', inputType: 'text', inputStyle: 'border w-52 outline-none border-blue-300', bind: 'subject'},
    {name: '简介', inputType: 'textaera', inputStyle: 'border w-52 outline-none h-52 border-blue-300', bind: 'brief'},
    {name: '文章页面(页数)', inputType: 'text', inputStyle: 'border w-52 outline-none border-blue-300', bind: 'docPage'},
    {name: '内容补充', inputType: 'textaera', inputStyle: 'border w-52 outline-none h-52 border-blue-300', bind: 'content'},
    {name: '良方推荐(页数)', inputType: 'text', inputStyle: 'border w-52 outline-none border-blue-300', bind: 'prescription'}
])


const saveData = {
    key: 'state',
    value: state
}

const uploadData = {
    url: `${config.uri}/yiriDoc`,
    data: state
}

onMounted(() => {
    if (window.localStorage.state) {
        const stateStr = window.localStorage.state
        for (let i in JSON.parse(stateStr)) {
            state[i] = JSON.parse(stateStr)[i]
        }
        console.log(state) 
    }
})
</script>
